<template>
	<div class="review-content">
		<!-- 审核确认弹框 -->
		<AuditConfirm ref="auditDialog" :submit="auditOne" />
		<div class="head">
			<span class="title">
				{{ $t('agent.member_convert_agent_audit_info') }}
			</span>
			<div v-if="type" class="right-btn">
				<el-button plain @click="goBack">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="success"  @click="() => $refs.auditDialog.successOpen()">
					{{ $t('agent.audit_through') }}
				</el-button>
				<el-button type="danger" @click="() => $refs.auditDialog.dangerOpen()">
					{{ $t('agent.audit_reject') }}
				</el-button>
			</div>
			<div v-else class="right-btn">
				<el-button plain @click="goBack">
					{{ $t('common.back') }}
				</el-button>
			</div>
		</div>
		<div class="main-content detailBoxStyle">
			<div class="review-content">
				<p class="name">{{ $t('agent.transfer_member_info') }}</p>
				<div class="review-flex">
					<div>
						{{ $t('common.member_number') }}:
						{{ list.memberName || '-' }}
					</div>
					<div>
						{{ $t('common.number_type') }}:
						{{ typeFilter(list.memberAccountType, 'accountType') }}
					</div>
					<div>
						{{ $t('common.register_time') }}:
						{{ list.memberRegisterDatetime || '-' }}
					</div>
					<div>
						{{ $t('common.risk_control_level') }}:
						{{ list.memberWindControlName || '-' }}
					</div>
					<div>
						{{ $t('common.belong_merchant') }}:
						{{ merchantFilter(list.merchantId) }}
					</div>
					<div>
						{{ $t('common.business_model') }}:
						{{ mappingBusinessModel(list.businessModel) || '-' }}
					</div>
					<div>
						{{ $t('agent.current_superiors_agent') }}:
						{{ list.currentProxyName || '-' }}
					</div>
					<div>
						{{ $t('agent.agent_type') }}:
						{{
							typeFilter(
								list.currentProxyAccountType,
								'accountType'
							)
						}}
					</div>
					<div>
						{{ $t('agent.bind_time') }}: {{ list.createdAt || '-' }}
					</div>
					<div v-if="list.businessModel === 1">
						代理分润模式：
						{{ list.commissionMode === 2 ? '佣金模式' : '占成模式' }}
					</div>
				</div>
				<!-- <div class="review-flex">
				</div> -->
			</div>
			<div class="review-content">
				<p class="name">{{ $t('agent.transfer_in_agent_info') }}</p>
				<div class="review-flex">
					<div>
						{{ $t('agent.agent_account') }}:
						{{ list.transferProxyName || '-' }}
					</div>
					<div>
						{{ $t('agent.agent_type') }}:
						{{
							typeFilter(
								list.transferProxyAccountType,
								'accountType'
							)
						}}
					</div>
					<div>
						{{ $t('common.register_time') }}:
						{{ list.transferProxyRegisterDatetime || '-' }}
					</div>
					<div>
						{{ $t('common.risk_control_level') }}:
						{{ list.transferProxyWindControlName || '-' }}
					</div>
					<div v-if="list.businessModel === 1">
						代理分润模式：
						{{ list.transferProxyCommissionMode === 2 ? '佣金模式' : '占成模式' }}
					</div>
				</div>
			</div>
			<div class="review-content" style="height: 200px">
				<p class="name">{{ $t('agent.apply_info') }}</p>
				<div class="review-flex">
					<el-table
						border
						size="mini"
						:data="[1]"
						style="width: 100%"
						:header-cell-style="getRowClass"
						highlight-current-row
					>
						<el-table-column
							align="center"
							:label="$t('agent.modified_before_up_agent')"
						>
							<template>
								{{ list.currentProxyName || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('agent.modified_after_up_agent')"
						>
							<template>
								{{ list.transferProxyName || '-' }}
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="review-flex">
					<div>
						{{ $t('agent.apply_people') }}:
						{{ list.applyName || '-' }}
					</div>
					<div>
						{{ $t('agent.apply_time') }}:
						{{ list.createdAt || '-' }}
					</div>
					<div>
						{{ $t('agent.apply_info') }}:
						{{ list.applyRemark || '-' }}
					</div>
				</div>
			</div>
			<div class="review-content">
				<p class="name">{{ $t('agent.audit_info') }}</p>
				<div class="review-flex">
					<div v-if="list.auditStatus === -1">
						{{ $t('agent.audit_people') }}: -
					</div>
					<div v-else>
						{{ $t('agent.audit_people') }}:
						{{ list.auditName || '-' }}
					</div>
					<div>
						{{ $t('agent.audit_time') }}:
						{{ list.auditDatetime || '-' }}
					</div>
					<div>
						{{ $t('agent.audit_remark') }}:
						{{ list.auditRemark || '-' }}
					</div>
				</div>
			</div>
		</div>
		<el-dialog
			:title="$t('agent.submit_confirm')"
			center
			:visible.sync="visible"
			:before-close="closeFormDialog"
			width="610px"
			class="audit-confirm"
		>
			<el-form
				ref="form"
				:model="form"
				:rules="formRules"
				label-width="auto"
			>
				<el-form-item
					v-if="action"
					:label="$t('agent.submit_audit_info')"
				>
					<el-input
						v-model="form.remark"
						clearable
						type="textarea"
						:maxlength="500"
						show-word-limit
						:autosize="{ minRows: 4, maxRows: 4 }"
						style="width: 380px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item
					v-else
					:label="$t('agent.submit_audit_info')"
					prop="remark"
				>
					<el-input
						v-model="form.remark"
						clearable
						type="textarea"
						:maxlength="500"
						show-word-limit
						:autosize="{ minRows: 4, maxRows: 4 }"
						style="width: 380px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="visible = false">
					{{ $t('agent.cancel') }}
				</el-button>
				<el-button type="primary" @click="auditOne">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
// import dayjs from 'dayjs'
import AuditConfirm from '@/components/AuditConfirm'

export default {
	components: {
		AuditConfirm
	},
	mixins: [list],
	props: {
		// 审核 true 仅返回 false
		type: Boolean,
		rowData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		this.auditOne = this.throttle(this.auditOne, 1000)
		return {
			list: {},
			form: {
				remark: ''
			},
			visible: false,
			action: false
		}
	},
	computed: {
		formRules() {
			return {
				remark: [
					{
						required: true,
						message: this.$t('agent.rule_audit_tip'),
						trigger: 'blur'
					}
				]
			}
		}
	},
	created() {
		this.getInfo()
	},
	methods: {
		closeFormDialog() {
			this.visible = false
		},
		confirm(action) {
			this.remark = ''
			this.action = action
			this.visible = true
		},
		auditOne(form) {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
				const params = {
					id: this.rowData.id,
					auditRemark: form.remark,
					auditStatus: form.status === 1 ? 2 : 3
				}

				this.$api
					.memberTransferAudit(params)
					.then((res) => {
						loading.close()
						if (res?.code === 200) {
							this.$message({
								type: 'success',
								message: this.$t('common.action_success')
							})
							this.visible = false
							this.goBack()
						} else {
							this.$message({
								message:
									res?.msg ||
									this.$t('agent.interface_exceptions'),
								type: 'error'
							})
						}
					})
					.catch(() => {
						loading.close()
					})
		},
		goBack() {
			this.$emit('goBack')
		},
		getInfo() {
			const params = {
				id: this.rowData.id
			}
			this.$api.memberTransferDetail(params).then((res) => {
				if (res?.code === 200) {
					this.loading = false
					this.list = res.data || {}
				} else {
					this.loading = false
					this.$message({
						message:
							res?.msg || this.$t('agent.interface_exceptions'),
						type: 'error'
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.review-content {
	width: 100%;
	.head {
		height: 70px;
		line-height: 70px;
		width: 100%;
		background: #000;
		border-radius: 2px;
		padding: 0 30px;
		.title {
			font-weight: 600;
			color: rgb(192, 190, 190);
		}
		.right-btn {
			float: right;
		}
	}
	.main-content {
		.review-content {
			min-height: 150px;
			border-top: 0px;
			padding: 30px;
			.name {
				font-weight: 600;
			}
			.review-flex {
				position: relative;
				width: 100%;
				margin-top: 15px;
				div {
					display: inline-block;
					width: 24%;
					line-height: 35px;
				}
			}
		}
		.more-height {
			height: 200px;
		}
	}
}
</style>
